<template>
  <Menu
    class="sysMenu"
    @select="handleSelect"
    :style="{ height: menuHeight + 'px' }"
  >
    <div v-for="(menu, index) in menuList" :key="index">
      <MenuItem v-if="!menu.children" :index="menu.target">
        <Icon :class="menu.icon"></Icon>
        <span>{{ menu.name }}</span>
      </MenuItem>
      <ResetSubMenu v-else :data="menu"></ResetSubMenu>
    </div>
  </Menu>
</template>
<script>
import { Menu, MenuItem, Icon } from "element-ui";
import ResetSubMenu from "./ResetSubMenu";
export default {
  name: "SysMenu",
  data() {
    return {
      menuList: [], // 菜单列表
      menuHeight: document.documentElement.clientHeight - 60 // 菜单高度
    };
  },
  created() {
    // 获取用户对应的资源
    this.$axios.get("/users/resources").then(res => {
      console.log("resources", res.data);
      this.menuList = res.data;
    });
  },
  mounted() {
    // 获取浏览器 body 高度
    // const bodyHeight = document.documentElement.clientHeight;
    // 浏览器窗口改变时
    window.addEventListener("resize", () => {
      this.menuHeight = document.documentElement.clientHeight - 60;
    });
  },
  methods: {
    // 选择菜单项
    handleSelect(url) {
      console.log(url);
      this.$router.push({
        path: url
      }); // 路由跳转
    }
  },
  components: {
    Menu,
    MenuItem,
    Icon,
    ResetSubMenu
  }
};
</script>
